const authorizeCmpt = Vue.component('authorize-cmpt', {
    template: '<div style="display: flex;justify-items: center">\n' +
        '    <!--  授权-->\n' +
        '    <el-dialog style="text-align: left"\n' +
        '               title="API授权"\n' +
        '               :visible.sync="dialogVisible"\n' +
        '               width="60%">\n' +
        '      <el-transfer class="transfer"\n' +
        '                   filterable\n' +
        '                   :button-texts="[\'移除\', \'添加\']"\n' +
        '                   :titles="[\'未选择\', \'已选择\']"\n' +
        '                   :filter-method="filterMethod"\n' +
        '                   filter-placeholder="请输入应用名称"\n' +
        '                   v-model="value"\n' +
        '                   :data="data">\n' +
        '      </el-transfer>\n' +
        '      <span slot="footer" class="dialog-footer">\n' +
        '        <el-button @click="dialogVisible = false">取 消</el-button>\n' +
        '        <el-button type="primary" @click="submit()">确 定</el-button>\n' +
        '      </span>\n' +
        '    </el-dialog>\n' +
        '\n' +
        '    <!--  上线多环境-->\n' +
        '    <el-dialog style="text-align: left"\n' +
        '               title="上线多环境"\n' +
        '               :filterable="false"\n' +
        '               :visible.sync="multipleEnviron"\n' +
        '               width="60%">\n' +
        '      <el-transfer class="transfer"\n' +
        '                   filterable\n' +
        '                   :button-texts="[\'移除\', \'添加\']"\n' +
        '                   :titles="[\'未选择\', \'已选择\']"\n' +
        '                   filter-placeholder="请输入环境名称"\n' +
        '                   v-model="multipleEnv"\n' +
        '                   :data="environData">\n' +
        '      </el-transfer>\n' +
        '      <span slot="footer" class="dialog-footer">\n' +
        '        <el-button @click="multipleEnviron = false">取 消</el-button>\n' +
        '        <el-button type="primary" @click="envSubmit()">确 定</el-button>\n' +
        '      </span>\n' +
        '    </el-dialog>\n' +
        '  </div>'
    ,
    data() {
        return {
            multipleEnviron: false,
            idApi: '',
            titles: ['未选择', '已选择'],
            data: [],
            dialogVisible: false,
            value: [],
            multipleEnv: [],
            environData: [],
            filterMethod(query, item) {
                return item.pinyin.indexOf(query) > -1;
            },
        };
    }, methods: {
        submit() {
            let data = {
                idApi: this.idApi,
                idApp: this.value
            }
            axios.post(window.RT_ENV.host_config.host + "/app/appAuth", JSON.stringify(data), {
                headers: {
                    'Content-Type': 'application/json',
                    "token": sessionStorage.getItem("current-authorized")
                }
            }).then(res => {
                if (res.data.code === 200) {
                    this.$message.success(res.data.message)
                } else {
                    this.$message.error(res.data.message)
                }
                this.dialogVisible = !this.dialogVisible
            })
        },
        initEnv(idApi, current) {
            this.idApi = idApi
            this.multipleEnv = []
            this.$loading()
            axios.get(window.RT_ENV.host_config.host + "/api/env/list", {
                headers:
                    {"token": sessionStorage.getItem("current-authorized")}
            }).then(res => {
                if (res.data.code === 200) {
                    this.multipleEnv = current.split(",");
                    this.buildEnvData(res.data.data)
                } else {
                    this.$message.error(res.data.message)
                }
            })
            this.$loading().close()
            this.multipleEnviron = true
        },
        initCmpt(idApi) {
            this.idApi = idApi
            this.$loading()
            axios.get(window.RT_ENV.host_config.host + "/app/getAppMappingApi?idApi=" + idApi, {
                headers: {
                    "token": sessionStorage.getItem("current-authorized")
                }
            }).then(res => {
                this.value = []
                res.data.data.forEach(item => {
                    this.value.push(item.idApp)
                })
            })
            axios.post(window.RT_ENV.host_config.host + "/app/list?size=100", {}, {
                headers: {
                    'Content-Type': 'application/json',
                    "token": sessionStorage.getItem("current-authorized")
                }
            }).then(res => {
                if (res.data.code === 200) {
                    this.buildData(res.data.data.records)
                }
                this.$loading().close()
                this.dialogAuth = true
            }).catch(e => {
                console.log(e.text)
                this.$message.error("Load fail")
                this.$loading().close()
            })
        },
        buildData(i) {
            let data = [];
            i.forEach(item => {
                data.push({
                    label: item.appName,
                    key: item.idApp,
                    pinyin: item.appName,
                });
            });
            this.data = data;
        },
        buildEnvData(i) {
            let data = [];
            i.forEach(item => {
                data.push({
                    label: item.name,
                    key: item.idEnv,
                    pinyin: item.name,
                    disabled: !item.available
                });
            });
            this.environData = data;
        },
        envSubmit() {
            if (this.multipleEnv.length < 1) {
                return
            }
            let data = {
                idApi: this.idApi,
                idEnv: this.multipleEnv
            }
            axios.post(window.RT_ENV.host_config.host + "/api/online/env", JSON.stringify(data), {
                headers: {
                    "token": sessionStorage.getItem("current-authorized"),
                    'Content-Type': 'application/json',
                }
            }).then(res => {
                if (res.data.code === 200) {
                    this.$message.success("处理完成")
                    this.multipleEnviron = false
                } else {
                    this.$message.error(res.data.message)
                }
            })
        }, refreshCache(idApi) {
            axios.get(window.RT_ENV.host_config.host + "/api/refresh/cache?id=" + idApi, {
                headers: {"token": sessionStorage.getItem("current-authorized")}
            }).then(res => {
                if (res.data.code === 200) {
                    this.$message.success(res.data.message)
                } else {
                    this.$message.error(res.data.message)
                }
            })
        }, deleteApi(i) {
            this.$confirm('This operation will permanently delete the API and the corresponding authorization relationship. Do you want to continue?', 'Operation tips', {
                confirmButtonText: 'Confirm',
                cancelButtonText: 'Cancel',
                type: 'warning'
            }).then(() => {
                axios.get(window.RT_ENV.host_config.host + "/api/delete?id=" + i, {
                    headers:
                        {"token": sessionStorage.getItem("current-authorized")}
                }).then(res => {
                    if (res.data.code === 200) {
                        this.$message({
                            type: 'success',
                            message: 'successfully deleted!'
                        });
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.data.message
                        });
                    }
                }).catch(e => {
                    this.$message({
                        type: 'error',
                        message: e.getText
                    });
                })
            }).catch(() => {
            });
        }, apiAvailable(i) {
            let data = {
                idApi: i.idApi,
                available: !i.available
            }
            axios.post(window.RT_ENV.host_config.host + "/api/addOrDelete", JSON.stringify(data), {
                headers: {
                    'Content-Type': 'application/json',
                    "token": sessionStorage.getItem("current-authorized")
                }
            }).then(res => {
                if (res.data.code === 200) {
                    i.available = !i.available
                    this.$message.success(res.data.message)
                } else {
                    this.$message.error(res.data.message)
                }
            })
        },
    }
});